<template>
    <div class="order-management">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
        <span>订单管理</span>
          <el-input 
            placeholder="搜索订单单号" 
            v-model="searchQuery" 
            clearable 
            style="width: 300px; float: left; margin-right: 10px;"
          ></el-input>
          <!-- <el-button type="primary" size="small" style="float: right;" @click="openAddDialog">添加订单</el-button> -->
        </div>
        <el-table :data="pagedOrders" style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="customerName" label="客户名称"></el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="totalPrice" label="总价"></el-table-column>
          <el-table-column label="操作" width="180">
            <template v-slot="scope">
              <el-button size="small" type="danger" @click="deleteOrder(scope.row.id)">删除订单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredOrders.length"
          style="margin-top: 20px; text-align: right;">
        </el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref, computed } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const orders = ref([
        { id: 101, customerName: '张三', productName: '手机', quantity: 2, totalPrice: 13998 },
        { id: 102, customerName: '李四', productName: '电视', quantity: 1, totalPrice: 3999 },
        { id: 103, customerName: '王五', productName: '衬衫', quantity: 5, totalPrice: 995 },
        { id: 102, customerName: '李四', productName: '电视', quantity: 1, totalPrice: 3999 },
        { id: 103, customerName: '王五', productName: '衬衫', quantity: 5, totalPrice: 995 }
      ]);
  
      const searchQuery = ref('');
      const currentPage = ref(1);
      const pageSize = ref(10);
  
      const filteredOrders = computed(() => {
      if (!searchQuery.value.trim()) {
        return orders.value;
      } else {
        const searchId = parseInt(searchQuery.value.trim());
        return orders.value.filter(order => 
          order.id === searchId
        );
      }
    });

    const pagedOrders = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredOrders.value.slice(start, end);
    });
  
      const deleteOrder = (id) => {
        ElMessageBox.confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orders.value = orders.value.filter(order => order.id !== id);
          ElMessage.success('删除成功');
        }).catch(() => {
          ElMessage.info('已取消删除');
        });
      };
  
      const handleSizeChange = (size) => {
        pageSize.value = size;
      };
  
      const handleCurrentChange = (page) => {
        currentPage.value = page;
      };
  
      return {
        searchQuery,
        currentPage,
        pageSize,
        filteredOrders,
        pagedOrders,
        deleteOrder,
        handleSizeChange,
        handleCurrentChange
      };
    }
  };
  </script>
  
  <style scoped>
  .order-management {
    padding: 20px;
    width: 80%;
  }
  
  .el-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .el-table {
    border-radius: 8px;
    overflow: hidden;
  }
  
  .el-button {
    margin-left: 10px;
  }
  
  </style>
  